import React, {PureComponent} from 'react'
import Tabs from '../../Tabs'
import '../../Tabs/tab.scss'
import '../../../css/tab.scss'
const Tab = Tabs.Tab;

class CompanyDetail extends PureComponent {
    render() {
        const {detail} = this.props
        const tabs = detail.workshop.map((w, i) => {
            return (<Tab tab={w.name} key={`temper-tabs-${i}`}>
                <svg ref='svg'
                     viewBox={`0 0 ${w.size.join(' ')}`}
                     preserveAspectRatio="xMidYMin">
                    <image x="0" y="0" width={w.size[0]} height={w.size[1]}
                           xlinkHref={w.image}/>
                    {/*<rect x='100' y="100" width='100' height={100}/>*/}
                    {w.areas.map((area,i) => {
                        return <polygon points={area.lines}
                                        key={`temper-polygon-${i}`}
                                        style={{fill: 'transparent'}} onClick={() => {
                            area.handClick()
                        }}/>
                    })}
                </svg>
            </Tab>)
        })
        tabs.unshift(<Tab tab={'简介'}>
                        <pre>
                            {detail.info}
                        </pre>
                    </Tab>)
        return (
            <Tabs className='custom-tab'>
                {tabs}
            </Tabs>
        )
    }

}

export default CompanyDetail